<template>
  <div>
    <h1 v-color="color1">指令的值</h1>
    <h1 v-color="color2">指令的值</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color1: "red",
      color2: "green",
    };
  },
  directives: {
    color: {
      // el: 指令绑定的元素
      // binding.value: 指令后面传递的值
      inserted(el, binding) {
        // console.log(el, binding.value);
        el.style.color = binding.value;
      },
      // 当指令后面的值发生变化,就会执行的钩子函数
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
};
</script>

<style>
</style>